<template>
  <el-col>
    <el-menu router class="nav-menu" :default-active="$route.path">
      <el-menu-item v-for="(item,index) in routeArr" :key="index" :index="item.path">
        <router-link :to="item.path">{{ item.depict }}</router-link>
      </el-menu-item>
      <!-- <el-menu-item index="/page1">
        <span><router-link to="/page1">导航一</router-link></span>
      </el-menu-item>
      <el-menu-item index="/page2">
        <span><router-link to="/page2">导航二</router-link></span>
      </el-menu-item>
      <el-menu-item index="/page3">
        <span><router-link to="/page3">导航三</router-link></span>
      </el-menu-item>
      <el-menu-item index="/page4">
        <span><router-link to="/page4">导航四</router-link></span>
      </el-menu-item> -->
    </el-menu>
  </el-col>
</template>

<script setup>
import axios from 'axios';
import { ref, onMounted } from 'vue';
// 路由数据数组
const routeArr = ref([]);
onMounted(() => {
  // 获取路由数据
  getRouteArr();
})
// 获取路由数据列表方法
const getRouteArr = () => {
  axios.get('/api/user').then(res => {
    routeArr.value = res.data;
  })
}
</script>

<style scoped>
li{
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 去除导航下划线 */
a {
  text-decoration: none;
  color: black;
}
/* 添加选中样式 */
.nav-menu .is-active {
  background-color: #f189ed;
  border: 2px solid red;
}
</style>